import React from "react";
import './style.less'
import ParticlesBJ from "../Common/Particles/ParticlesBJ";
import {Button, Form, Input, message, Modal} from "antd";
import {http} from "../../util/httpService";
import md5 from 'js-md5'
import {ExclamationCircleOutlined} from "@ant-design/icons";

const {confirm} = Modal
const options = {
    particles: {
        number: {
            value: 50, //数量
            density: {
                enable: true,
                value_area: 1800, //区域散布密度大小
            },
        },
        color: {
            value: '#fafafa', //原子的颜色
        },
        line_linked: {
            //连接线
            enable: true, //  连接线
            color: '#fafafa', //连接线颜色
            width: '0.5', //连接线的宽度
            opacity: 1, //连接线不透明度
            shadow: {
                enable: true, //  连接线
                color: '#fafafa', //连接线颜色
                blur: 15,
                opacity: 1, //连接线不透明度
            },
        },
        shape: {
            //原子
            type: 'circle', //原子的形状
            stroke: {
                width: 0, //原理的宽度
                color: '#000000', //原子颜色
            },
            polygon: {
                nb_sides: 15, //  原子的多边形边数
            },
        },
        opacity: {
            value: 1, //不透明度
            random: true, //随机不透明度
            anim: {
                enable: true, //渐变动画
                speed: 1, //渐变动画速度
                opacity_min: 1, //渐变动画不透明度
                sync: false,
            },
        },
        size: {
            value: 8, // 原子大小
            random: true, //  原子大小随机
            anim: {
                enable: false, //原子渐变
                speed: 100, //原子渐变速度
                size_min: 0.1,
                sync: false,
            },
        },
        move: {
            enable: true, //原子移动
            speed: 2, //原子移动速度 (越大越快，越小越慢)
            direction: 'none', //   原子移动方向
            random: true, //  移动随机方向
            straight: false, // 直接移动
            out_mode: 'out', // 是否移动出画布
            bounce: false, //是否跳动移动
            attract: {
                enable: true, //原子之间吸引
                rotateX: 600, //原子之间吸引X水平距离
                rotateY: 1200, //y垂直距离
            },
        },
    },
}

function Login() {
    const onFinish = (values) => {
        console.log(values)
        const obj = {
            ...values,
            password: md5(values.password)
        }
        console.log(obj)
        http('/login', obj, true, 'post').then(res => {
            console.log(res)
            const data = res.data
            if (data.status === 200 && !data.data.errorCode) {
                if (data.data.isFirst == 0) {
                    window.sessionStorage.setItem('userInfo', JSON.stringify(data.data))
                    window.sessionStorage.setItem('token', data.data.xAccessToken)
                    window.sessionStorage.setItem('status', true)
                    window.location.href = '/home';
                } else {
                    confirm({
                        title: '提示',
                        icon: <ExclamationCircleOutlined/>,
                        content: '第一次登录请修改初始密码',
                        onOk() {

                        },
                    })
                }
            } else {
                message.error(res.data.errorMessage)
            }
        })
    }
    return (
        <div className={'view-login'}>
            <ParticlesBJ className={'ParticlesBJ'} options={options}/>
            <div className="view-content">
                <p>UUS统一登录系统</p>
                <Form onFinish={onFinish}>
                    <Form.Item label={'账号'} name={'account'} rules={[{
                        required: true,
                        message: '该选项为必填',
                    }]}>
                        <Input/>
                    </Form.Item>
                    <Form.Item label={'密码'} name={'password'} rules={[{
                        required: true,
                        message: '该选项为必填',
                    }]}>
                        <Input type={'password'}/>
                    </Form.Item>
                    <Form.Item>
                        <Button className={'submitBtn'} type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Login